<template>
  <div class="call-media">
    <div class="me">
      <video autoPlay playsInline muted :controls="false" ref="me_video_ref"></video>
    </div>
    <div class="peer">
      <video autoPlay playsInline muted :controls="false" ref="peer_video_ref"></video>
      <audio autoPlay muted :controls="false" ref="peer_audio_ref"></audio>
    </div>
  </div>
</template>

<script>
export default {
  name: "index",
  data() {
    return {
      acceptVideo: false,
      acceptAudio: false,
      peerId: '',
      meId: '',
      isRender: false,
      produce: false,
      consumer: false
    }
  },
  computed: {
    homeowner() {
      return this.$store.state.homeowner
    }
  },
  watch: {
    "$store.state.producer": {
      handler(nval, oval) {
        if (nval.length === 1) {

        } else if (nval.length === 2) {
          this.handleCreateMeVideoAndAudio(this.$store.state.producer)
          if (this.homeowner === this.$store.state.roomClient._peerId) {
            window.parent.postMessage({state: 'joinRoom'}, '*')
          }
        }
      }
    },
    "$store.state.consumers": {
      handler(nval, oval) {
        this.handlerOpenConsumer(nval)
      },
      deep: true
    },
    isRender(nval, oval) {
      if (nval) {
        this.handleCreateMeVideoAndAudio(this.$store.state.producer)
        this.handleCreatePeer(this.$store.state.consumers)
      }
    }
  },
  methods: {
    handleCreateMeVideoAndAudio(arr) {
      let videoTrack, audioTrack
      let elVideo = this.$refs.me_video_ref
      arr.forEach((item) => {
        let track = item.track
        if (track.kind === 'video') {
          videoTrack = track
        } else if (track === 'audio') {
          audioTrack = track
        }
      })
      if (videoTrack) {
        const videoStram = new MediaStream
        videoStram.addTrack(videoTrack)
        elVideo.srcObject = videoStram
        elVideo.oncanplay = function () {

        }
        elVideo.onplay = function () {

        }
        elVideo.onpause = function () {

        }
        elVideo.play().catch(() => {
          console.log('me video play fail')
        })
      }
      if (audioTrack) {
        let elAudio = this.$refs.me_audio_ref
      }

    },
    handleCreatePeer(consumer) {
      for (let item in consumer) {
        if (consumer.hasOwnProperty(item)) {
          let arr = consumer[item]
          if (Array.isArray(arr)) {
            arr.forEach((val) => {
              if (val.track.kind === 'audio' && !this.acceptAudio) {
                this.acceptAudio = true
                this.handleCreatePeerAudio(val)
              } else if (val.track.kind === 'video' && !this.acceptVideo) {
                this.acceptVideo = true
                this.handleCreatePeerVideo(val)
              }
            })
          }
        }
      }
      const param = JSON.stringify({
        type: 'video',
        peerId: this.peerId,
        mePeerId: this.mePeerId
      })
      if (this.homeowner !== this.$store.state.roomClient._peerId) {
        window.parent.postMessage({state: 'newConsumerJoin', param}, '*')
      }
    },
    handleCreatePeerVideo(data) {
      const elVideo = this.$refs.peer_video_ref
      const stream = new MediaStream()
      stream.addTrack(data.track)
      elVideo.srcObject = stream
    },
    handleCreatePeerAudio(data) {
      const elAudio = this.$refs.peer_audio_ref
      const stream = new MediaStream()
      stream.addTrack(data.track)
      elAudio.srcObject = stream
    },
    handlerOpenConsumer(obj) {
      const callType = this.$store.state.callType
      switch (callType) {
        case 'audio':
          break
        case 'video':
          if (!this.peerId) {
            this.peerId = Object.keys(obj)[0]
          } else {
            this.handleCreatePeer(this.$store.state.consumers)
          }
          break
      }
    }
  }
}
</script>
